<script src="./script.js"></script>
<style src="./style.scss" lang="scss" scoped></style>
<template>
  <div>
    <web-header></web-header>
    <div>
      <div class="fs_inner w">
        <div class="left">
          <el-menu
            mode="horizontal"
            active-text-color="#f10215"
            class="el-menu-vertical-demo">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-document"></i>
                <span>名片/彩页</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1" @click="$router.push({path:'/quote/card'});">名片</el-menu-item>
                <el-menu-item index="1-2" @click="$router.push({path:'/quote/color-page'});">彩页</el-menu-item>
                <el-menu-item index="1-3" @click="$router.push({path:'/quote/note-pad'});">便签</el-menu-item>
                <el-menu-item index="1-4" @click="$router.push({path:'/quote/joint-sheet'});">联单</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-document"></i>
                <span>不干胶</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1" @click="$router.push({path:'/quote/sticker'});">拼版不干胶</el-menu-item>
                <el-menu-item index="2-2" @click="$router.push({path:'/quote/sticker'});">商标不干胶</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-document"></i>
                <span>画册</span>
              </template>
            </el-submenu>

            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-document"></i>
                <span>喷绘报价</span>
              </template>
            </el-submenu>

            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-document"></i>
                <span>广告器材</span>
              </template>
            </el-submenu>
          </el-menu>
        </div>
        <div class="middle">
          <el-carousel height="300px">
            <el-carousel-item>
              <img src="@/assets/www/banner/1.jpg">
            </el-carousel-item>
<!--            <el-carousel-item>-->
<!--              <img src="@/assets/www/banner/2.jpg">-->
<!--            </el-carousel-item>-->
            <el-carousel-item>
              <img src="@/assets/www/banner/3.jpg">
            </el-carousel-item>
            <el-carousel-item>
              <img src="@/assets/www/banner/4.jpg">
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="right">
          <div class="wel">
            <div>你好！</div>
            <div>欢迎来到 雲鼎峰傳媒</div>
          </div>
          <div class="btn" v-if="!user">
            <el-button type="danger" @click="$router.push({path:'/login'});">登录</el-button>
            <el-button type="danger" plain @click="reg">注册</el-button>
          </div>
          <div class="gg">
            <div class="title">公告</div>
<!--            <div class="post">【注意】关于违禁印品通知</div>-->
          </div>
        </div>
      </div>
    </div>

    <div class="w">
<!--      <div class="price-title"></div>-->
<!--      <div class="special-price">-->
<!--        <div class="special-item" style="background-image: url('https://cdn.qianqianying.com/yundingfeng/special/17.jpg')">-->
<!--        </div>-->
<!--        <div class="special-item" style="background-image: url('https://cdn.qianqianying.com/yundingfeng/special/18.jpg')">-->
<!--        </div>-->
<!--        <div class="special-item" style="background-image: url('https://cdn.qianqianying.com/yundingfeng/special/19.jpg')">-->
<!--        </div>-->
<!--        <div class="special-item" style="background-image: url('https://cdn.qianqianying.com/yundingfeng/special/20.jpg')">-->
<!--        </div>-->
<!--      </div>-->

      <div class="split-title">- 热门报价 -</div>

      <div class="panel">
        <div class="panel-left" @click="coming">
          <img src="https://cdn.qianqianying.com/yundingfeng/hot/1.png" />
          <div class="panel-left-title">
            <div class="panel-left-title-text">办公印品</div>
            <div>热销爆款，精美齐全</div>
          </div>
        </div>
        <div class="panel-right">
          <div class="panel-right-top">
            <div class="panel1" @click="goQuote('color-page')">
              <div class="panel-title">
                <div>宣传单</div>
                <span>汇聚人气 宣传互动</span>
              </div>
              <img src="https://cdn.qianqianying.com/yundingfeng/hot/2.png" />
            </div>
            <div class="panel2" @click="goQuote('card')">
              <div class="panel-title">
                <div>名片</div>
                <span>自我介绍最有效的方法</span>
              </div>
              <img src="https://cdn.qianqianying.com/yundingfeng/hot/3.png" />
            </div>
            <div class="panel2"  @click="coming">
              <div class="panel-title">
                <div>数码快印</div>
                <span>效率高 品质好</span>
              </div>
              <img src="https://cdn.qianqianying.com/yundingfeng/hot/4.png" />
            </div>
          </div>
          <div class="panel-right-top">
            <div class="panel2" @click="coming">
              <div class="panel-title">
                <div>企业画册</div>
                <span>色彩鲜艳 质量稳定</span>
              </div>
              <img src="https://cdn.qianqianying.com/yundingfeng/hot/5.png" />
            </div>
            <div class="panel2" @click="goQuote('sticker')">
              <div class="panel-title">
                <div>不干胶</div>
                <span>超强黏贴 精选优质</span>
              </div>
              <img src="https://cdn.qianqianying.com/yundingfeng/hot/6.png" />
            </div>
            <div class="panel2" @click="coming">
              <div class="panel-title">
                <div>餐饮印品</div>
                <span>价格实惠 高端大气</span>
              </div>
              <img src="https://cdn.qianqianying.com/yundingfeng/hot/7.png" />
            </div>
            <div class="panel2" @click="coming">
              <div class="panel-title">
                <div>广告产品</div>
                <span>企业营销 推广首选</span>
              </div>
              <img src="https://cdn.qianqianying.com/yundingfeng/hot/8.png" />
            </div>
          </div>
        </div>
      </div>

      <div class="split-title">- 广告器材 -</div>

      <div class="panel"h>
        <div class="panel-left" @click="coming">
          <img src="https://cdn.qianqianying.com/yundingfeng/item/1.png" />
          <div class="panel-left-title">
            <div class="panel-left-title-text">展示器材</div>
            <div>风吹雨打 屹立不倒</div>
          </div>
        </div>
        <div class="panel-right">
          <div class="panel-right-top">
            <div class="panel2" @click="coming">
              <div class="panel-title">
                <div>木质海报展架</div>
                <span>朴素之美 至臻至纯</span>
              </div>
              <img src="https://cdn.qianqianying.com/yundingfeng/item/2.png" />
            </div>
            <div class="panel2" @click="coming">
              <div class="panel-title">
                <div>铁质海报展架</div>
                <span>坚固牢靠 一翻一换</span>
              </div>
              <img src="https://cdn.qianqianying.com/yundingfeng/item/3.png" />
            </div>
            <div class="panel2" @click="coming">
              <div class="panel-title">
                <div>韩式x架</div>
                <span>质感突出 商机立显</span>
              </div>
              <img src="https://cdn.qianqianying.com/yundingfeng/item/4.png" />
            </div>
            <div class="panel2" @click="coming">
              <div class="panel-title">
                <div>丽屏</div>
                <span>质感突出</span>
              </div>
              <img src="https://cdn.qianqianying.com/yundingfeng/item/5.png" />
            </div>
          </div>
          <div class="panel-right-top">
            <div class="panel2" @click="coming">
              <div class="panel-title">
                <div>易拉宝</div>
                <span>经典样式 极速印刷</span>
              </div>
              <img src="https://cdn.qianqianying.com/yundingfeng/item/6.png" />
            </div>
            <div class="panel2" @click="coming">
              <div class="panel-title">
                <div>门型架</div>
                <span>企业最爱</span>
              </div>
              <img src="https://cdn.qianqianying.com/yundingfeng/item/7.png" />
            </div>
            <div class="panel2" @click="coming">
              <div class="panel-title">
                <div>手提海报架</div>
                <span>企业宣传佳品</span>
              </div>
              <img src="https://cdn.qianqianying.com/yundingfeng/item/8.png" />
            </div>
            <div class="panel2" @click="coming">
              <div class="panel-title">
                <div>KT板挂画架</div>
                <span>门店展示</span>
              </div>
              <img src="https://cdn.qianqianying.com/yundingfeng/item/9.png" />
            </div>
          </div>
        </div>
      </div>

    </div>

    <div style="height:100px;"></div>
<!--    <web-footer></web-footer>-->
  </div>
</template>
